<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        table {
            border: 2px solid gray;
            border-collapse: collapse;
            border-spacing: 0;
        }

        th,
        td {
            border: 2px solid gray;
            text-align: center;
            padding: 10px 20px;
        }

        input {
            width: 80px;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="addOne">添加</button>
        <div v-if="goods.length>0">
            <table>
                <tr>
                    <th>id</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item,index in goods" :key="item">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td><button @click="subcount(index)" :disabled="goods[index].count<=1">-</button>
                        {{item.count}}
                        <button @click="addcount(index)">+</button>
                    </td>
                    <td><button @click="delOne(index)">移除</button></td>
                </tr>
                <tr v-if="add">
                    <td><input v-model="id" type="text"></td>
                    <td><input v-model="name" type="text"></td>
                    <td><input v-model="price" type="text"></td>
                    <td><input v-model="count" type="text"></td>
                    <td><button @click="queding">确定</button></td>
                </tr>
            </table>
            <h1>总价格：￥{{sumPrice}}</h1>
        </div>
        <div v-else>
            <h1>购物车为空！！</h1>
            <table v-if="add">
                <tr>
                    <th>id</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td><input v-model="id" type="text"></td>
                    <td><input v-model="name" type="text"></td>
                    <td><input v-model="price" type="text"></td>
                    <td><input v-model="count" type="text"></td>
                    <td><button @click="queding">确定</button></td>
                </tr>
            </table>
        </div>

    </div>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                add: false,
                id: '',
                name: '',
                price: '',
                count: '',
                goods: [{ id: 1, name: "充电宝", price: 99.111, count: 1 },
                { id: 2, name: "小风扇", price: 88.222, count: 1 },
                { id: 3, name: "小音箱", price: 125.533, count: 1 },
                { id: 4, name: "蓝牙耳机", price: 315.344, count: 1 },]
            }
        },
        methods: {
            addOne() {
                this.add = true
            },
            delOne(index) {
                this.goods.splice(index, 1)
            },
            queding() {
                var Obj = { id: this.id, name: this.name, price: this.price, count: this.count }
                this.goods.push(Obj)
                this.add = false
            },
            addcount(index) {
                this.goods[index].count++
            },
            subcount(index) {
                this.goods[index].count--
            },

        },
        computed: {
            sumPrice() {
                var sum = 0;
                for (var i = 0; i < this.goods.length; i++) {
                    sum = sum + (this.goods[i].price * this.goods[i].count)
                }
                sum = sum.toFixed(2)
                return sum;
            }
        }
    })
</script>

</html>